import React, { useEffect, useState } from 'react';
import './AddTeam.scss'
import { useNavigate } from 'react-router-dom'
import { Form, Button, Input, Select, Col, Avatar, message, Card, Radio, Tag, Switch, Drawer, Descriptions } from 'antd'
import { UserOutlined } from '@ant-design/icons'
import { getOfOrg, getTeamTag, addTeam, getOrglist } from '../../../../api/Datas'
import { num } from '../../../../utils/datas'
interface Props {

}

function AddTeam(props: Props) {
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const { TextArea } = Input;
    // const [name, setName] = useState(JSON.parse(localStorage.getItem('user') + '').name)
    const [messageApi, contextHolder] = message.useMessage()
    var [ofOrglist, setOflist] = useState([])
    var [teamTag, setTeamTag] = useState([])
    var [teamer, setTeamer] = useState([])
    const navigate = useNavigate()
    var [options, setOptions] = useState([])
    const [open, setOpen] = useState(false);
    // 获取form表单实例
    const [form] = Form.useForm()
    // 挂载期
    useEffect(() => {
        getManagerList()
        getTeamTagList()
    }, [])

    // 获取团队标签
    var getTeamTagList = async () => {
        var res = await getTeamTag()
        var arr = res.data.map((item: any) => {
            return { value: item.id, label: item.name }
        })
        setTeamTag(arr)
    }
    // 获取所属机构下拉框
    var getManagerList = async () => {
        var res = await getOrglist()
        var arr = res.data.data.map((item: any) => {
            return { value: item.mechanismId, label: item.mechanismName }
        })
        setOptions(arr)
    }
    // 表单间距
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    // 医师详情
    const showDrawer = () => {
        setOpen(true);
    };
    // 关闭抽屉
    const onClose = () => {
        setOpen(false);
    };
    // 提交表单
    const onFinish = async (values: any) => {
        console.log(values);
        var res = await addTeam({ ...values, teamImg: 'https://cdn7.axureshop.com/demo/1881228/images/%E5%9B%A2%E9%98%9F%E7%AE%A1%E7%90%86/u5410.png', teamCreater: '', teamCreatetime: getlocalTime(), teamQrcode: 'https://cdn7.axureshop.com/demo/1881228/images/%E6%88%91%E7%AE%A1%E7%90%86%E7%9A%84%E5%9B%A2%E9%98%9F%E8%AF%A6%E6%83%85/u5951.png', teamState: 1 }).then(res => {
            console.log(res)
            if (res.data.code == 200) {
                messageApi.open({
                    type: 'success',
                    content: '新增成功',
                });
                setTimeout(() => {
                    navigate(-1)
                }, 1000)
            }

        })

    };
    // 提交失败
    const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    //获取本地时间
    var getlocalTime = () => {
        var date = new Date()
        var year = date.getFullYear();
        var mounth = date.getMonth() + 1;
        var day = date.getDate();
        return year + "-" + mounth + "-" + day
    }

    return (
        <div className='addteam'>
            <div className="title">
                <div className='leftborder'></div>
                <h3>新增团队信息</h3>
            </div>
            <h4>团队信息</h4>
            <Form
                {...layout}
                layout="inline"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Col span={8}>
                    <Form.Item
                        label="团队编号"
                        name="teamId"
                    >
                        <span className='jsonid'>自动生成</span>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="团队名称"
                        name="teamName"
                        rules={[{ message: '请填写团队名称' }]}
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="团队头像"
                        name="teamImg"
                        rules={[{ message: '请选择团队头像' }]}
                    >
                        <div className="avatorbox">
                            <Avatar shape="square" src='https://cdn7.axureshop.com/demo/1881228/images/%E5%9B%A2%E9%98%9F%E7%AE%A1%E7%90%86/u5410.png' />
                        </div>
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="团队长"
                        name="teamLeader"
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="所属机构"
                        name="mechanismId"
                    >
                        <Select
                            options={options}
                            defaultValue='请选择' />
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item
                        label="团队标签"
                        name="labelId"
                    >
                        <Select
                            options={teamTag}
                            defaultValue='请选择'

                        />
                    </Form.Item>
                </Col>


                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        新增
                    </Button>
                </Form.Item>

            </Form>
            {/* 抽屉-医师详情 */}
            <Drawer placement="right" onClose={onClose} open={open} size="large" closable={false}>
                {
                    teamer.map((item: any) => {
                        return (
                            <>
                                <Descriptions title="医生信息" column={2}>
                                    <Descriptions.Item label="医生编号" span={1}>{item.id}</Descriptions.Item>
                                    <Descriptions.Item label="医生姓名">{item.name}</Descriptions.Item>
                                    <Descriptions.Item label="医生头像"><Avatar src={item.avatar} /> </Descriptions.Item>
                                    <Descriptions.Item label="性别">{item.sex}</Descriptions.Item>
                                </Descriptions>
                                <Descriptions column={1}>
                                    <Descriptions.Item label="角色">{item.role}</Descriptions.Item>
                                    <Descriptions.Item label="医生简介">{item.info}</Descriptions.Item>
                                    <Descriptions.Item label="医生擅长">{item.begood}</Descriptions.Item>

                                    <Descriptions.Item label="加入团队">
                                        {
                                            item.joinin.map((sitem: any) => {
                                                return (
                                                    <>{sitem.teamname} <br /> </>
                                                )
                                            })
                                        }
                                    </Descriptions.Item>

                                    <Descriptions.Item label="签约人数">{item.people}</Descriptions.Item>
                                    <Descriptions.Item label="创建时间">{item.createtime}</Descriptions.Item>
                                    <Descriptions.Item label="创建人">{item.creator}</Descriptions.Item>
                                    <Descriptions.Item label="账号状态"><Switch defaultChecked={item.states} checkedChildren="启用" unCheckedChildren="禁用" /> </Descriptions.Item>
                                </Descriptions>
                            </>
                        )
                    })
                }

            </Drawer>
            {contextHolder}
        </div>
    );
}

export default AddTeam;